<template>
  <el-scrollbar height="970px">
    <div class="out-box" v-if="sieveList.length > 0">
      <el-row class="row-box" v-for="(row,rowIndex) in maxRow">
        <el-col :span="spanNum" v-for="(item,index) in maxCol">
          <div class="sieve-item" >
            <div class="sieve-item-content" :class="getBoxClass(sieveList[index + maxCol*rowIndex])">
              <span :class="getTextClass(sieveList[index + maxCol*rowIndex])">{{ sieveList[index + maxCol*rowIndex] ? sieveList[index + maxCol*rowIndex].deviceCode : ''}}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<script setup lang="ts">

import useSettingStore from "@/stores/setting";
import {GET_RESTFUL} from "@/api";

const rowColList = ref<RowColData[]>([])
const maxRow = ref<Number>(16)
const maxCol = ref<Number>(5)
const spanNum = ref<Number>(5)

const timer = ref<Number>(0)

const sieveList = ref<Sieve[]>([])

onMounted(()=>{
  rowColList.value.push({spanNum:3,colNum:8})
  rowColList.value.push({spanNum:7,colNum:7})
  rowColList.value.push({spanNum:4,colNum:6})
  rowColList.value.push({spanNum:5,colNum:5})
  rowColList.value.push({spanNum:6,colNum:4})
  rowColList.value.push({spanNum:8,colNum:3})

  getData()
  nextTick(()=>{
    swiper()
  })
})

onBeforeUnmount(()=>{
  clearData()
})

function getData(){
  GET_RESTFUL("screeningMachineInfo",1).then((res) => {
    if (res.code === 200) {
      if (res.data && res.data.rfidList && res.data.rfidList.length > 0){
        sieveList.value = res.data.rfidList
        maxCol.value = JSON.parse(res.data.deviceConfig).column
        maxRow.value = Math.ceil(sieveList.value.length / maxCol.value)
        rowColList.value.forEach(e=>{
          if (e.colNum === maxCol.value ){
            spanNum.value = e.spanNum
          }
        })
      }
    }
  })
}
function clearData(){
  if (timer.value && timer.value > 0) {
    clearInterval(timer.value)
    timer.value = 0
  }
}

function swiper(){
  if (timer.value && timer.value > 0) {
    return
  }
  let looper = () => {
    getData()
  }
  timer.value = setInterval(looper, useSettingStore().listAutoTime);
}

function getBoxClass(item){
  if (item){
    return item.status === 'online' ? 'sieve-item-primary' : 'sieve-item-warning'
  }
  return 'sieve-item-primary'
}

function getTextClass(item){
  if (item){
    return item.status === 'online' ? 'sieve-item-content-success' : 'sieve-item-content-warning'
  }
  return 'sieve-item-content-success'
}



</script>

<style scoped lang="scss">
.out-box{
  width: 100%;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}
.row-box {
  .el-col-7 {
    max-width: 14.285714285714%;
    flex: 0 0 14.285714285714%;
  }
  .el-col-5 {
    max-width: 20%;
    flex: 0 0 20%;
  }
  .sieve-item-primary {
    border: #00b8ff solid 1px;
  }
  .sieve-item-warning {
    //border: #E6A23C solid 1px;
    animation: glow 800ms ease-out infinite alternate;
  }
  .sieve-item-danger {
    //border: red solid 1px;
    animation: danger 800ms ease-out infinite alternate;
  }
  .sieve-item{
    margin: 8px;
    width: 100%;
    height: 40px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    .sieve-item-content{
      width: 200px;
      height: 100%;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-around;
      align-items: center;
      .sieve-item-content-label{
        width: 40%;
        color: #FFFFFF;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-info{
        width: 60%;
        color: #909399;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-primary{
        width: 60%;
        color: #409EFF;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-success{
        width: 100%;
        color: #95d475;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-danger{
        width: 100%;
        color: red;
        font-size: 18px;
        text-align: center;
      }
      .sieve-item-content-warning{
        width: 100%;
        color: #E6A23C;
        font-size: 18px;
        text-align: center;
      }
    }
  }
}
@keyframes glow {
  0% {
    border-color: rgb(239, 111, 64);
    box-shadow: 0 0 5px rgba(255, 30, 0, 0.2), inset 0 0 5px #FF9D291F, 0 1px 0 #C56E06B2;
  }
  100% {
    border-color: rgba(252, 144, 16, 0.89);
    box-shadow: 0 0 15px #C56E06B2, inset 0 0 10px #FF9D29D2, 0 1px 0 #F58403CD;
  }
}

@keyframes danger {
  0% {
    border-color: rgba(231, 132, 132, 0.99);
    box-shadow: 0 0 5px rgba(231, 132, 132, 0.99),inset 0 0 5px rgba(255, 41, 41, 0.12), 0 1px 0 rgba(245, 6, 6, 0.7);
  }
  100% {
    border-color: rgba(255, 0, 0, 1);
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.99),inset 0 0 10px rgba(255, 41, 41, 0.82), 0 1px 0 rgba(245, 3, 3, 0.8);
  }
}
</style>